<template>
  <div class="zw-list-frame">
    <div class="zw-list-search">
      <search-frame :show-advance-query="showAdvanceQuery" @on-query="query">
        <template #base>
          <slot name="base"></slot>
        </template>
        <template #advance>
          <slot name="advance"></slot>
        </template>
        <template #append>
          <slot name="append"></slot>
        </template>
      </search-frame>
    </div>
    <div class="zw-list-table">
      <el-table class="table" show-overflow-tooltip :data="innerTableData" :height="maxTableHeight" style="width: 100%"
        :row-class-name="tableRowClassName" header-cell-class-name="header-cell" :highlight-current-row="false"
        @selection-change="handleSelectionChange">
        <el-table-column v-if="showOperation" :width="operationWidth" fixed="right" label="操作" align="center">
          <template #default="{ row }">
            <slot name="operations" :value="row"></slot>
          </template>
        </el-table-column>
        <el-table-column v-if="showSelection" fixed="left" type="selection" width="55" />
        <el-table-column v-if="showIndex" fixed="left" label="序号" type="index" width="60"
          align="center"></el-table-column>
        <template v-for="(item) in props.columns" :key="item.prop">
          <el-table-column show-overflow-tooltip align="center" :prop="item.prop" :label="item.colName"
            :width="item.width === -1 ? '*' : item.width" />
        </template>
      </el-table>
    </div>
    <div class="zw-list-pager">
      <el-pagination layout="sizes, prev, pager, next, jumper, ->, total" v-model:current-page="page.pageNo"
        v-model:page-size="page.pageSize" :total="props.total" @size-change="sizeChanged" @current-change="pageChanged"
        :page-sizes="sizeList" />
    </div>
    <slot name="dialog"></slot>
  </div>
</template>
<script lang="ts" setup>
import type { PageVO } from '@/server/page-type';
import { ref, watch } from 'vue';
import SearchFrame from './SearchFrame.vue';
import type { ColumnType } from '../types';
import ArrayUtil from '@/plugins/array';

const tableRowClassName = ({
  rowIndex,
}: {
  row: unknown
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'odd-row'
  }
  return 'even-row'
}
const page = ref<PageVO>({
  pageNo: 1,
  pageSize: 30,
  total: 0
})
const sizeList = ref<number[]>([])
for (let index = 5; index <= 100; index += 5) {
  sizeList.value.push(index)
}
const props = withDefaults(defineProps<{
  total: number,
  tableData: object[],
  columns: ColumnType[],
  showAdvanceQuery: boolean,
  showSelection?: boolean,
  showIndex?: boolean,
  operationWidth?: number,
  showOperation?: boolean,
  innerControl?: boolean,
}>(), {
  total: 0,
  tableData: () => [],
  columns: () => [],
  showAdvanceQuery: true,
  showSelection: false,
  showIndex: true,
  operationWidth: 140,
  showOperation: true,
  innerControl: false,
})
const emits = defineEmits(["sizeChanged", "pageChanged", "query", "rowSelected"])
const innerTableData = ref<object[]>([]);
const sizeChanged = (value: number) => {
  if (props.innerControl) {
    innerTableData.value = ArrayUtil.page(props.tableData, page.value.pageNo, page.value.pageSize);
  } else {
    emits("sizeChanged", value)
  }
}
const pageChanged = (value: number) => {
  if (props.innerControl) {
    innerTableData.value = ArrayUtil.page(props.tableData, page.value.pageNo, page.value.pageSize);
  } else {
    emits("pageChanged", value)
  }
}
const query = () => {
  emits("query");
}
const maxTableHeight = ref(0);
const calcTableHeight = () => {
  setTimeout(() => {
    maxTableHeight.value = window.innerHeight - 64 - 48 - 48;
  }, 100);
}
const handleSelectionChange = (val: Record<string, object>[]) => {
  emits("rowSelected", val);
}
window.addEventListener("resize", () => {
  calcTableHeight();
})
calcTableHeight();
watch(() => props.tableData, () => {
  if (props.innerControl) {
    innerTableData.value = ArrayUtil.page(props.tableData, page.value.pageNo, page.value.pageSize);
  } else {
    innerTableData.value = props.tableData;
  }
}, { immediate: true })
</script>
<style lang="scss" scope>
.zw-list-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .zw-list-search {
    height: 48px;
    flex-shrink: 0;
  }

  .zw-list-table {
    flex: 1;

    .table {
      width: 100%;
      /* min-height: 640px; */
      // padding: 0px 20px;
    }
  }

  .zw-list-pager {
    height: 48px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center
  }
}
</style>
<style>
.el-table .header-cell {
  background-color: #4472c4 !important;
  color: #fff !important;
}

.el-table .even-row {
  --el-table-tr-bg-color: #cfd5ea;
}

.el-table .odd-row {
  --el-table-tr-bg-color: #e9ebf5;
}

/* 移除表格行悬停时的变色效果 */
.el-table__body tr.el-table__row.hover-row>td {
  background-color: inherit;
}
</style>
